<script setup lang="ts">
import iconImg from './img/icon.jpg'
import payImg from './img/pay.jpg'

interface ItemProps {
  id: number
  count: number
  email: string
}

interface Props {
  show: boolean
  item?: ItemProps,
}

withDefaults(defineProps<Props>(),
    {
      show: false,
      item: () => ({id: 1, count: 1, email: '666666@qq.com'})
    }
)

defineEmits(['cancel'])

</script>
<template>
  <div class="card" v-if="show">
    <div class="modal">
      <div class="header">
        <div class="title">App Store</div>
        <div class="cancel" @click="$emit('cancel')">取消</div>
      </div>
      <div class="main">
        <div class="content">
          <div class="icon">
            <img class="iconImg" :src="iconImg" alt=""/>
          </div>
          <div class="description">
            <div class="des-count">
              <div class="count-number">{{ item.count * 10 }}钻石</div>
              <div class="count-age">12+</div>
            </div>
            <div class="des-game">QQ飞车</div>
            <div class="des-info">App内购项目</div>
          </div>
        </div>
        <div class="account">
          <div class="account-name">帐号</div>
          <div class="account-email">{{ item.email }}</div>
        </div>
        <div class="price">
          <div class="price-title">价格</div>
          <div class="price-count">￥{{ item.count }}.00</div>
        </div>
        <div class="pay">
          <img class="payImg" :src="payImg" alt=""/>
          <div class="pay-description">用触控 ID 支付</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #141414;

  .modal {
    width: 50%;
    border-radius: 1.6em;
    background-color: rgb(200, 212, 231);

    .header {
      display: flex;
      justify-content: space-between;
      padding: 1.2em 2em;

      .title {
        color: #0f0f0f;
        font-weight: bold;
        font-size: 1.2rem;
      }

      .cancel {
        cursor: pointer;
        color: #0074ff;
      }
    }

    .main {
      display: flex;
      flex-direction: column;
      padding-left: 2em;

      > * {
        display: flex;

        &::after {
          content: ' ';
          position: absolute;
          bottom: 0;
          border: 1px solid #a8adaf;
          transform: scaleY(0.5);
          width: 100%;
        }
      }

      .content {
        .icon {
          padding: 1em 1em 1em 3em;

          .iconImg {
            height: 3.6em;
            border-radius: 0.2em;
          }
        }

        .description {
          padding: 1em 0 1em 0;
          display: flex;
          flex-direction: column;
          color: #767a83;
          font-size: 1.1rem;

          .des-count {
            display: flex;

            .count-number {
              color: #000;
            }

            .count-age {
              margin-left: 0.5em;
              font-size: 12px;
              border: 1px solid #767a83;
              border-radius: 0.4em;
              padding: 0 0.6em;
              line-height: 1.2;
              height: 80%;
            }
          }
        }
      }

      .account {
        font-size: 1.1rem;

        .account-name {
          padding: 1em 1em 1em 3.8em;
          color: #767a83;
        }

        .account-email {
          padding: 1em 1em 1em 0;
        }
      }

      .price {
        font-size: 1.1rem;
        justify-content: space-between;

        .price-title {
          padding: 1em 1em 1em 7em;
        }

        .price-count {
          font-size: 1.2rem;
          font-weight: bold;
          padding: 1em 1em 1em 0;
        }
      }

      .pay {
        flex-direction: column;
        align-items: center;

        .payImg {
          padding-top: 1em;
          display: block;
          height: 4em;
          border-radius: 50%;
        }

        .pay-description {
          padding: 0.2em 0 1em 0;
          font-size: 1.2rem;
        }
      }
    }
  }
}
</style>